<template>
    <Page :total="total"
          :current='current'
          :page-size='pageSize'
          :show-elevator='showElevator'
          :show-sizer='showSizer'
          :page-size-opts='pageSizeOpts'
          @on-change='pageCurrentChange'
          @on-page-size-change='pageRowChange'></Page>
</template>
<script>

    const oneOf = function(value, validList) {
        for (let i = 0; i < validList.length; i++) {
            if (value === validList[i]) {
                return true;
            }
        }
        return false;
    }
    export default{
        name:'CPage',
        props:{
            current: {
                type: Number,
                default: 1
            },
            total: {
                type: Number,
                default: 0
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pageSizeOpts: {
                type: Array,
                default () {
                    return [5,10, 20, 30, 40,50];
                }
            },
            placement: {
                validator (value) {
                    return oneOf(value, ['top', 'bottom']);
                },
                default: 'bottom'
            },
            transfer: {
                type: Boolean,
                default: false
            },
            size: {
                validator (value) {
                    return oneOf(value, ['small']);
                }
            },
            simple: {
                type: Boolean,
                default: false
            },
            showTotal: {
                type: Boolean,
                default: false
            },
            showElevator: {
                type: Boolean,
                default: true//TODO 默认显示
            },
            showSizer: {
                type: Boolean,
                default: true//TODO 默认显示
            },
            className: {
                type: String
            },
            styles: {
                type: Object
            }
        },
        data(){
            return{
                
            }
        },
        mounted(){

        },
        methods:{
            pageCurrentChange(page){
                this.$emit('on-change', page);
            },
            pageRowChange(pageSize){
                this.$emit('on-page-size-change', pageSize);
            },
        },
        components:{
        }
    }
</script>